<?php
require_once '../includes/dbcon.php';
// Check if user is logged in
// Check if user is logged in
if (!is_logged_in()) {
    redirect('login.php');
}

// Enable error reporting for debugging
error_reporting(E_ALL);
ini_set('display_errors', 1);

// Initialize variables
$message = '';
$error = '';
$acyear = $klass = $subject = $term = '';
$marks_data = [];
$record_count = 0;

// Fetch data for dropdowns
try {
    // Fetch academic years
    $stmt_years = $DBcon->query("SELECT DISTINCT academic_year FROM calender ORDER BY academic_year DESC");
    $years = $stmt_years->fetchAll(PDO::FETCH_ASSOC);
    
    // Fetch classes
    $stmt_classes = $DBcon->query("SELECT DISTINCT classid FROM class ORDER BY classid");
    $classes = $stmt_classes->fetchAll(PDO::FETCH_ASSOC);
    
    // Fetch subjects
    $stmt_subjects = $DBcon->query("SELECT subject_id, subjectname FROM subjectss ORDER BY subjectname");
    $subjects = $stmt_subjects->fetchAll(PDO::FETCH_ASSOC);
    
} catch (PDOException $e) {
    $error = "Error fetching dropdown data: " . $e->getMessage();
}

// Handle AJAX update request - THIS MUST COME BEFORE ANY OUTPUT
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['action'])) {
    if ($_POST['action'] == 'update_score') {
        // Send JSON header
        header('Content-Type: application/json');
        
        if (!isset($_POST['csrf_token']) || !validate_csrf_token($_POST['csrf_token'])) {
            echo json_encode(['success' => false, 'message' => 'Invalid CSRF token']);
            exit;
        }
        
        $sn = intval($_POST['sn']);
        $field = sanitize_input($_POST['field']);
        $value = floatval($_POST['value']);
        
        // Validate field
        if (!in_array($field, ['test', 'exam'])) {
            echo json_encode(['success' => false, 'message' => 'Invalid field']);
            exit;
        }
        
        // Validate value (0-100)
        if ($value < 0 || $value > 100) {
            echo json_encode(['success' => false, 'message' => 'Score must be between 0 and 100']);
            exit;
        }
        
        try {
            // Get current values to calculate total
            $stmt = $DBcon->prepare("SELECT test, exam FROM marks WHERE sn = ?");
            $stmt->execute([$sn]);
            $current = $stmt->fetch(PDO::FETCH_ASSOC);
            
            if (!$current) {
                echo json_encode(['success' => false, 'message' => 'Record not found']);
                exit;
            }
            
            // Update the score
            $update_stmt = $DBcon->prepare("UPDATE marks SET $field = ? WHERE sn = ?");
            $update_stmt->execute([$value, $sn]);
            $affected_rows = $update_stmt->rowCount();
            
            if ($affected_rows === 0) {
                echo json_encode(['success' => false, 'message' => 'No records were updated']);
                exit;
            }
            
            // Calculate new total
            if ($field == 'test') {
                $new_total = $value + $current['exam'];
            } else {
                $new_total = $current['test'] + $value;
            }
            
            // Get admin/user from session
            $admin = isset($_SESSION['username']) ? $_SESSION['username'] : 'System';
            
            echo json_encode([
                'success' => true, 
                'message' => '✓ Score updated successfully!',
                'new_total' => $new_total,
                'updated_by' => $admin,
                'sn' => $sn,
                'field' => $field,
                'value' => $value
            ]);
            
        } catch (PDOException $e) {
            error_log("Update error: " . $e->getMessage());
            echo json_encode(['success' => false, 'message' => 'Update failed: ' . $e->getMessage()]);
        }
        exit; // IMPORTANT: Stop execution after AJAX response
    }
}

// Handle form submission for filtering
if ($_SERVER['REQUEST_METHOD'] == 'GET' && isset($_GET['filter'])) {
    $acyear = sanitize_input($_GET['acyear'] ?? '');
    $klass = sanitize_input($_GET['klass'] ?? '');
    $subject = sanitize_input($_GET['subject'] ?? '');
    $term = sanitize_input($_GET['term'] ?? '');
    
    if (empty($acyear) || empty($klass) || empty($subject) || empty($term)) {
        $error = "Please select all filter criteria";
    } else {
        try {
            // Count records
            $count_stmt = $DBcon->prepare("
                SELECT COUNT(*) as count 
                FROM marks 
                WHERE acyear = ? 
                AND klass = ? 
                AND subject = ? 
                AND term = ?
            ");
            $count_stmt->execute([$acyear, $klass, $subject, $term]);
            $result = $count_stmt->fetch(PDO::FETCH_ASSOC);
            $record_count = $result['count'];
            
            if ($record_count > 0) {
                // Fetch marks records
                $marks_stmt = $DBcon->prepare("
                    SELECT m.* 
                    FROM marks m
                    WHERE m.acyear = ? 
                    AND m.klass = ? 
                    AND m.subject = ? 
                    AND m.term = ?
                    ORDER BY m.regno
                ");
                $marks_stmt->execute([$acyear, $klass, $subject, $term]);
                $marks_data = $marks_stmt->fetchAll(PDO::FETCH_ASSOC);
                
                $message = "Found $record_count record(s)";
            } else {
                $error = "No records found matching the selected criteria.";
            }
            
        } catch (PDOException $e) {
            $error = "Error fetching records: " . $e->getMessage();
        }
    }
}

// Generate CSRF token
$csrf_token = generate_csrf_token();
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Preview & Edit Marks - School Admin</title>
  <!-- plugins:css -->
  <link rel="stylesheet" href="vendors/iconfonts/font-awesome/css/all.min.css">
  <link rel="stylesheet" href="vendors/css/vendor.bundle.base.css">
  <link rel="stylesheet" href="vendors/css/vendor.bundle.addons.css">
  <!-- endinject -->
  <!-- inject:css -->
  <link rel="stylesheet" href="css/style.css">
  <!-- endinject -->
  <style>
    .editable-score {
      cursor: pointer;
      transition: all 0.2s;
      position: relative;
      padding: 8px;
      border-radius: 4px;
      min-height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .editable-score:hover {
      background-color: #e3f2fd;
      box-shadow: 0 0 0 1px #2196F3;
    }
    .editable-score.editing {
      background-color: #fff8e1;
      box-shadow: 0 0 0 2px #ffc107;
    }
    .edit-input {
      width: 80px;
      padding: 6px 8px;
      border: 2px solid #2196F3;
      border-radius: 4px;
      text-align: center;
      font-size: 14px;
      font-weight: bold;
    }
    .edit-buttons {
      margin-top: 5px;
      display: flex;
      gap: 5px;
      justify-content: center;
    }
    .save-btn, .cancel-btn {
      padding: 4px 12px;
      font-size: 12px;
      border-radius: 3px;
      border: none;
      cursor: pointer;
    }
    .save-btn {
      background: #4CAF50;
      color: white;
    }
    .save-btn:hover {
      background: #45a049;
    }
    .cancel-btn {
      background: #f44336;
      color: white;
    }
    .cancel-btn:hover {
      background: #d32f2f;
    }
    .total-score {
      font-weight: bold;
      color: #1976D2;
      padding: 8px;
    }
    .grade-A { color: #4CAF50; font-weight: bold; }
    .grade-B { color: #8BC34A; font-weight: bold; }
    .grade-C { color: #FFC107; font-weight: bold; }
    .grade-D { color: #FF9800; font-weight: bold; }
    .grade-E { color: #F44336; font-weight: bold; }
    .grade-F { color: #D32F2F; font-weight: bold; }
    
    .success-toast {
      position: fixed;
      top: 20px;
      right: 20px;
      background: #4CAF50;
      color: white;
      padding: 15px 20px;
      border-radius: 4px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      z-index: 9999;
      animation: slideIn 0.3s ease-out;
      display: flex;
      align-items: center;
      max-width: 350px;
    }
    
    .error-toast {
      position: fixed;
      top: 20px;
      right: 20px;
      background: #f44336;
      color: white;
      padding: 15px 20px;
      border-radius: 4px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      z-index: 9999;
      animation: slideIn 0.3s ease-out;
      display: flex;
      align-items: center;
      max-width: 350px;
    }
    
    @keyframes slideIn {
      from { transform: translateX(100%); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }
    
    .loading-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255,255,255,0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      z-index: 10;
    }
    
    .loading-spinner {
      width: 20px;
      height: 20px;
      border: 2px solid #f3f3f3;
      border-top: 2px solid #3498db;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    .updated-indicator {
      position: absolute;
      top: -8px;
      right: -8px;
      background: #4CAF50;
      color: white;
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 10px;
      animation: pulse 1s;
    }
    
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.2); }
      100% { transform: scale(1); }
    }
  </style>
</head>
<body>
  <div class="container-scroller">
    <?php include("header.php"); ?>
    <div class="container-fluid page-body-wrapper">
      <?php include("sidebar.php"); ?>
      <div class="main-panel">
        <div class="content-wrapper">
          <div class="page-header">
            <h3 class="page-title">
              <i class="fas fa-edit text-primary"></i>
              Preview & Edit Marks
            </h3>
          </div>
          
          <!-- Filter Form -->
          <div class="row">
            <div class="col-md-12 grid-margin stretch-card">
              <div class="card">
                <div class="card-body">
                  <h4 class="card-title">Filter Records</h4>
                  
                  <?php if (!empty($message)): ?>
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                      <i class="fas fa-check-circle"></i> <?php echo $message; ?>
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                  <?php endif; ?>
                  
                  <?php if (!empty($error)): ?>
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                      <i class="fas fa-exclamation-circle"></i> <?php echo $error; ?>
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                  <?php endif; ?>
                  
                  <form class="forms-sample" method="GET" action="">
                    <div class="row">
                      <div class="col-md-3">
                        <div class="form-group">
                          <label for="acyear">Academic Year *</label>
                          <select class="form-control" id="acyear" name="acyear" required>
                            <option value="">-- Select Academic Year --</option>
                            <?php foreach ($years as $year): ?>
                              <option value="<?php echo htmlspecialchars($year['academic_year']); ?>" 
                                <?php echo ($acyear == $year['academic_year']) ? 'selected' : ''; ?>>
                                <?php echo htmlspecialchars($year['academic_year']); ?>
                              </option>
                            <?php endforeach; ?>
                          </select>
                        </div>
                      </div>
                      
                      <div class="col-md-3">
                        <div class="form-group">
                          <label for="klass">Class *</label>
                          <select class="form-control" id="klass" name="klass" required>
                            <option value="">-- Select Class --</option>
                            <?php foreach ($classes as $class): ?>
                              <option value="<?php echo htmlspecialchars($class['classid']); ?>" 
                                <?php echo ($klass == $class['classid']) ? 'selected' : ''; ?>>
                                <?php echo htmlspecialchars($class['classid']); ?>
                              </option>
                            <?php endforeach; ?>
                          </select>
                        </div>
                      </div>
                      
                      <div class="col-md-3">
                        <div class="form-group">
                          <label for="subject">Subject *</label>
                          <select class="form-control" id="subject" name="subject" required>
                            <option value="">-- Select Subject --</option>
                            <?php foreach ($subjects as $subject_item): ?>
                              <option value="<?php echo htmlspecialchars($subject_item['subjectname']); ?>" 
                                <?php echo ($subject == $subject_item['subjectname']) ? 'selected' : ''; ?>>
                                <?php echo htmlspecialchars($subject_item['subjectname']); ?>
                              </option>
                            <?php endforeach; ?>
                          </select>
                        </div>
                      </div>
                      
                      <div class="col-md-3">
                        <div class="form-group">
                          <label for="term">Term *</label>
                          <select class="form-control" id="term" name="term" required>
                            <option value="">-- Select Term --</option>
                            <option value="FIRST TERM" <?php echo ($term == 'FIRST TERM') ? 'selected' : ''; ?>>FIRST TERM</option>
                            <option value="SECOND TERM" <?php echo ($term == 'SECOND TERM') ? 'selected' : ''; ?>>SECOND TERM</option>
                            <option value="THIRD TERM" <?php echo ($term == 'THIRD TERM') ? 'selected' : ''; ?>>THIRD TERM</option>
                            <option value="MOCK" <?php echo ($term == 'MOCK') ? 'selected' : ''; ?>>MOCK</option>
                          </select>
                        </div>
                      </div>
                    </div>
                    
                    <button type="submit" name="filter" class="btn btn-primary mr-2">
                      <i class="fas fa-search"></i> Load Records
                    </button>
                    <button type="button" class="btn btn-light" onclick="clearFilter()">
                      <i class="fas fa-eraser"></i> Clear Filter
                    </button>
                  </form>
                </div>
              </div>
            </div>
          </div>
          
          <!-- Marks Table -->
          <?php if (!empty($marks_data)): ?>
            <?php
            $total_test = 0;
            $total_exam = 0;
            $total_overall = 0;
            $grade_counts = ['A' => 0, 'B' => 0, 'C' => 0, 'D' => 0, 'E' => 0, 'F' => 0];
            
            foreach ($marks_data as $record) {
                $test = floatval($record['test']);
                $exam = floatval($record['exam']);
                $total = $test + $exam;
                
                $total_test += $test;
                $total_exam += $exam;
                $total_overall += $total;
                
                // Calculate grade
                if ($total >= 80) $grade_counts['A']++;
                elseif ($total >= 70) $grade_counts['B']++;
                elseif ($total >= 60) $grade_counts['C']++;
                elseif ($total >= 50) $grade_counts['D']++;
                elseif ($total >= 40) $grade_counts['E']++;
                else $grade_counts['F']++;
            }
            
            $avg_test = $record_count > 0 ? $total_test / $record_count : 0;
            $avg_exam = $record_count > 0 ? $total_exam / $record_count : 0;
            $avg_total = $record_count > 0 ? $total_overall / $record_count : 0;
            ?>
            
            <div class="row">
              <div class="col-md-12 grid-margin stretch-card">
                <div class="card">
                  <div class="card-body">
                    <h4 class="card-title">
                      <i class="fas fa-table"></i>
                      Marks Records
                      <span class="badge badge-primary float-right"><?php echo $record_count; ?> records</span>
                    </h4>
                    
                    <div class="alert alert-info">
                      <i class="fas fa-mouse-pointer"></i>
                      Click on any Test or Exam score to edit it. Changes save instantly.
                    </div>
                    
                    <div class="table-responsive">
                      <table class="table table-hover">
                        <thead>
                          <tr>
                            <th>#</th>
                            <th>Reg No</th>
                            <th>Test Score</th>
                            <th>Exam Score</th>
                            <th>Total</th>
                            <th>Grade</th>
                            <th>Updated By</th>
                            <th>Created At</th>
                          </tr>
                        </thead>
                        <tbody id="marks-body">
                          <?php 
                          $counter = 1;
                          foreach ($marks_data as $record): 
                            $test_score = floatval($record['test']);
                            $exam_score = floatval($record['exam']);
                            $total_score = $test_score + $exam_score;
                            
                            // Calculate grade
                            if ($total_score >= 80) $grade = 'A';
                            elseif ($total_score >= 70) $grade = 'B';
                            elseif ($total_score >= 60) $grade = 'C';
                            elseif ($total_score >= 50) $grade = 'D';
                            elseif ($total_score >= 40) $grade = 'E';
                            else $grade = 'F';
                            
                            $grade_class = "grade-$grade";
                          ?>
                            <tr id="row-<?php echo $record['sn']; ?>">
                              <td><?php echo $counter++; ?></td>
                              <td><strong><?php echo htmlspecialchars($record['regno']); ?></strong></td>
                              
                              <!-- Editable Test Score -->
                              <td>
                                <div class="editable-score" 
                                     data-id="<?php echo $record['sn']; ?>" 
                                     data-field="test"
                                     data-value="<?php echo $test_score; ?>"
                                     id="test-<?php echo $record['sn']; ?>">
                                  <?php echo number_format($test_score, 2); ?>
                                </div>
                              </td>
                              
                              <!-- Editable Exam Score -->
                              <td>
                                <div class="editable-score" 
                                     data-id="<?php echo $record['sn']; ?>" 
                                     data-field="exam"
                                     data-value="<?php echo $exam_score; ?>"
                                     id="exam-<?php echo $record['sn']; ?>">
                                  <?php echo number_format($exam_score, 2); ?>
                                </div>
                              </td>
                              
                              <!-- Total Score (auto-calculated) -->
                              <td>
                                <div class="total-score" id="total-<?php echo $record['sn']; ?>">
                                  <?php echo number_format($total_score, 2); ?>
                                </div>
                              </td>
                              
                              <!-- Grade (auto-calculated) -->
                              <td>
                                <div class="<?php echo $grade_class; ?>" id="grade-<?php echo $record['sn']; ?>">
                                  <?php echo $grade; ?>
                                </div>
                              </td>
                              
                              <td><span id="admin-<?php echo $record['sn']; ?>"><?php echo htmlspecialchars($record['admin']); ?></span></td>
                              <td><?php echo date('M d, Y', strtotime($record['created_at'])); ?></td>
                            </tr>
                          <?php endforeach; ?>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          <?php endif; ?>
          
          <footer class="footer">
            <div class="d-sm-flex justify-content-center justify-content-sm-between">
              <span class="text-muted text-center text-sm-left d-block d-sm-inline-block">
                Marks Preview & Edit Module
              </span>
              <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center">
                <i class="fas fa-edit text-success"></i> Inline Editing Enabled
              </span>
            </div>
          </footer>
        </div>
      </div>
    </div>
  </div>
  
  <!-- plugins:js -->
  <script src="vendors/js/vendor.bundle.base.js"></script>
  <script src="vendors/js/vendor.bundle.addons.js"></script>
  <!-- endinject -->
  <!-- inject:js -->
  <script src="js/off-canvas.js"></script>
  <script src="js/hoverable-collapse.js"></script>
  <script src="js/misc.js"></script>
  <!-- endinject -->
  
  <script>
    let csrfToken = '<?php echo $csrf_token; ?>';
    let editingElement = null;
    let originalValue = null;
    
    // Function to show toast notification
    function showToast(message, type = 'success') {
      // Remove existing toasts
      const existingToasts = document.querySelectorAll('.success-toast, .error-toast');
      existingToasts.forEach(toast => toast.remove());
      
      // Create toast
      const toast = document.createElement('div');
      toast.className = type === 'success' ? 'success-toast' : 'error-toast';
      toast.innerHTML = `
        <i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'}" style="font-size: 20px; margin-right: 10px;"></i>
        <div>${message}</div>
      `;
      
      document.body.appendChild(toast);
      
      // Auto-remove after 3 seconds
      setTimeout(() => {
        if (toast.parentNode) {
          toast.remove();
        }
      }, 3000);
    }
    
    // Function to calculate grade based on total
    function calculateGrade(total) {
      if (total >= 80) return {grade: 'A', class: 'grade-A'};
      if (total >= 70) return {grade: 'B', class: 'grade-B'};
      if (total >= 60) return {grade: 'C', class: 'grade-C'};
      if (total >= 50) return {grade: 'D', class: 'grade-D'};
      if (total >= 40) return {grade: 'E', class: 'grade-E'};
      return {grade: 'F', class: 'grade-F'};
    }
    
    // Function to update grade display
    function updateGrade(sn, total) {
      const gradeInfo = calculateGrade(total);
      const gradeElement = document.getElementById(`grade-${sn}`);
      if (gradeElement) {
        gradeElement.textContent = gradeInfo.grade;
        gradeElement.className = gradeInfo.class;
      }
    }
    
    // Function to handle score editing
    document.addEventListener('DOMContentLoaded', function() {
      document.body.addEventListener('click', function(e) {
        const editable = e.target.closest('.editable-score');
        if (editable && !editable.classList.contains('editing')) {
          startEditing(editable);
        }
      });
    });
    
    function startEditing(element) {
      // Cancel any existing editing
      if (editingElement) {
        cancelEdit();
      }
      
      editingElement = element;
      originalValue = parseFloat(element.dataset.value);
      const currentText = element.textContent.trim();
      
      // Create input field
      const input = document.createElement('input');
      input.type = 'number';
      input.className = 'edit-input';
      input.value = currentText;
      input.min = 0;
      input.max = 100;
      input.step = 0.5;
      
      // Create buttons container
      const buttons = document.createElement('div');
      buttons.className = 'edit-buttons';
      
      const saveBtn = document.createElement('button');
      saveBtn.className = 'save-btn';
      saveBtn.innerHTML = '<i class="fas fa-check"></i> Save';
      saveBtn.onclick = () => saveEdit();
      
      const cancelBtn = document.createElement('button');
      cancelBtn.className = 'cancel-btn';
      cancelBtn.innerHTML = '<i class="fas fa-times"></i> Cancel';
      cancelBtn.onclick = () => cancelEdit();
      
      buttons.appendChild(saveBtn);
      buttons.appendChild(cancelBtn);
      
      // Replace content with input and buttons
      element.innerHTML = '';
      element.appendChild(input);
      element.appendChild(buttons);
      element.classList.add('editing');
      
      // Focus and select text
      input.focus();
      input.select();
      
      // Add keyboard listeners
      input.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
          saveEdit();
        } else if (e.key === 'Escape') {
          cancelEdit();
        }
      });
      
      // Add click outside listener
      setTimeout(() => {
        document.addEventListener('click', clickOutsideHandler);
      }, 10);
    }
    
    function clickOutsideHandler(e) {
      if (editingElement && !editingElement.contains(e.target)) {
        saveEdit();
      }
    }
    
    function saveEdit() {
      if (!editingElement) return;
      
      const input = editingElement.querySelector('.edit-input');
      const newValue = parseFloat(input.value);
      const sn = editingElement.dataset.id;
      const field = editingElement.dataset.field;
      
      // Validate
      if (isNaN(newValue)) {
        showToast('Please enter a valid number', 'error');
        input.focus();
        return;
      }
      
      if (newValue < 0 || newValue > 100) {
        showToast('Score must be between 0 and 100', 'error');
        input.focus();
        return;
      }
      
      // Show loading state
      const loadingOverlay = document.createElement('div');
      loadingOverlay.className = 'loading-overlay';
      loadingOverlay.innerHTML = '<div class="loading-spinner"></div>';
      editingElement.appendChild(loadingOverlay);
      
      // Update via AJAX
      const formData = new FormData();
      formData.append('action', 'update_score');
      formData.append('csrf_token', csrfToken);
      formData.append('sn', sn);
      formData.append('field', field);
      formData.append('value', newValue);
      
      fetch('', {
        method: 'POST',
        body: formData
      })
      .then(response => {
        console.log('Response status:', response.status);
        console.log('Response headers:', response.headers);
        
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const contentType = response.headers.get('content-type');
        if (!contentType || !contentType.includes('application/json')) {
          throw new Error('Response is not JSON');
        }
        
        return response.json();
      })
      .then(data => {
        console.log('Response data:', data);
        
        // Remove click outside listener
        document.removeEventListener('click', clickOutsideHandler);
        
        // Remove loading overlay
        if (loadingOverlay.parentNode) {
          loadingOverlay.remove();
        }
        
        if (data.success) {
          // Update display
          editingElement.innerHTML = newValue.toFixed(2);
          editingElement.dataset.value = newValue;
          editingElement.classList.remove('editing');
          
          // Add updated indicator
          const indicator = document.createElement('span');
          indicator.className = 'updated-indicator';
          indicator.innerHTML = '✓';
          editingElement.appendChild(indicator);
          
          // Remove indicator after 2 seconds
          setTimeout(() => {
            if (indicator.parentNode) {
              indicator.remove();
            }
          }, 2000);
          
          // Update total
          const totalElement = document.getElementById(`total-${sn}`);
          if (totalElement && data.new_total !== undefined) {
            const newTotal = parseFloat(data.new_total);
            totalElement.textContent = newTotal.toFixed(2);
            
            // Update grade
            updateGrade(sn, newTotal);
          }
          
          // Update admin field if provided
          if (data.updated_by) {
            const adminElement = document.getElementById(`admin-${sn}`);
            if (adminElement) {
              adminElement.textContent = data.updated_by;
            }
          }
          
          // Show success message
          showToast(data.message || 'Score updated successfully!', 'success');
          
          // Reset editing element
          editingElement = null;
          
        } else {
          // Show error message
          showToast(data.message || 'Update failed', 'error');
          
          // Remove loading overlay
          if (loadingOverlay.parentNode) {
            loadingOverlay.remove();
          }
          
          // Return to editing mode
          editingElement.classList.remove('editing');
          startEditing(editingElement);
        }
      })
      .catch(error => {
        console.error('Fetch error:', error);
        
        // Remove click outside listener
        document.removeEventListener('click', clickOutsideHandler);
        
        // Remove loading overlay
        if (loadingOverlay.parentNode) {
          loadingOverlay.remove();
        }
        
        // Show error message
        showToast('Update failed. Please try again.', 'error');
        
        // Return to editing mode
        if (editingElement) {
          editingElement.classList.remove('editing');
          startEditing(editingElement);
        }
      });
    }
    
    function cancelEdit() {
      if (!editingElement) return;
      
      // Remove click outside listener
      document.removeEventListener('click', clickOutsideHandler);
      
      editingElement.innerHTML = parseFloat(editingElement.dataset.value).toFixed(2);
      editingElement.classList.remove('editing');
      editingElement = null;
    }
    
    // Utility functions
    function clearFilter() {
      document.getElementById('acyear').selectedIndex = 0;
      document.getElementById('klass').selectedIndex = 0;
      document.getElementById('subject').selectedIndex = 0;
      document.getElementById('term').selectedIndex = 0;
    }
    
    // Debug function to check AJAX response
    window.debugAjax = function() {
      const formData = new FormData();
      formData.append('action', 'update_score');
      formData.append('csrf_token', csrfToken);
      formData.append('sn', 1);
      formData.append('field', 'test');
      formData.append('value', 85.5);
      
      fetch('', {
        method: 'POST',
        body: formData
      })
      .then(response => response.text())
      .then(text => {
        console.log('Raw response:', text);
        try {
          const data = JSON.parse(text);
          console.log('Parsed JSON:', data);
        } catch (e) {
          console.log('Not valid JSON');
        }
      })
      .catch(error => console.error('Debug error:', error));
    };
  </script>
</body>
</html>